<template>
  <div class="page-chargeRecord">
    <div v-show="chargeList.length!=0" id="wrapper">
      <div id="scroller">
        <div v-for="(item,index) in chargeList" v-bind:key="index" @click="GoChargeDetails(item.id)" class="r-item">

          <div class="r-time r-box">    
            <label>消费金额：</label>
            <div class="r-inner">{{(item.amount/100).toFixed(2)}}元</div>
          </div>  
          <div class="r-time r-box">    
            <label>充电时长：</label>
            <div class="r-inner">{{item.actualTimespan}}</div>
          </div>        
          <div class="r-date-start r-box">
            <label>开始时间：</label>
            <div class="r-inner">{{item.beginTime}}</div>
          </div>
          <div class="r-code r-box">
            <label>订单编号：</label>
            <div class="r-inner">{{item.orderNumber}}</div>
          </div>
          <div class="r-code r-box">
            <label>站点名称：</label>
            <div class="r-inner">{{item.plug.site.name}}</div>
          </div>
          <div class="r-code r-box">
            <label>站点地点：</label>
            <div class="r-inner">{{item.plug.site.area}}{{item.plug.site.address}}</div>
          </div>


          <div class="r-status"  v-bind:class="{'r-status-pay':item.state==1,'r-status-running':item.state==2,'r-status-over':item.state==3||item.state==4,}">{{['','未支付','充电中','充电结束','已过期'][item.state]}}</div>
        </div>
        <div v-if="loadMoreFlag" class="scroll-loader">上拉加载更多...</div>
      </div>
    </div>
    <div v-if="chargeList.length==0" class="c-r-null">
      暂无充电记录
    </div>

  </div>
</template>



<style lang="less" scoped>
.page-chargeRecord {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #f2f2f5;

  #wrapper {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;

    #scroller {
      position: absolute;
      z-index: 1;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      width: 100%;
      -webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-text-size-adjust: none;
      -moz-text-size-adjust: none;
      -ms-text-size-adjust: none;
      -o-text-size-adjust: none;
      text-size-adjust: none;
    }

    .scroll-loader {
      text-align: center;
      height: 40px;
    }
  }

  .c-r-null {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    font-size: 28px;
    color: #999;
    text-align: center;
    background: #fff;
  }
}
// 列表
.r-item {
  position: relative;
  width: 100%;
  background: #fff;
  font-size: 26px;
  box-sizing: border-box;
  margin-bottom: 20px;
  padding: 30px 50px;
  // box-shadow: 1px 5px 10px #ccc;
  // border-radius: 5px;
  font-size: 26px;
  color: #666;
  border-bottom: 1px solid #ececec;

  .r-area {
    color: #333;
    height: 50px;
    line-height: 50px;
    margin-bottom: 5px;
  }

  .r-box {
    display: -webkit-box;
    line-height: 40px;
    label {
      display: block;
      width: 150px;
    }
    .r-inner {
      -webkit-box-flex: 1;
    }
  }

  .r-status {
    position: absolute;
    right: 20px;
    top: 40px;
    background: url(../public/imgs/icon-arrow-right.png) right center no-repeat;
    background-size: 32px 32px;
    box-sizing: border-box;
    padding: 0 30px 0 0;
    font-size: 28px;
    &.r-status-over {
      color: #999;
    }
    &.r-status-running {
      color: #00ac64;
    }
    &.r-status-pay {
      color: #f93;
    }
  }
}
</style>


<script>
var AlloyTouch = require("alloytouch");
var Transform = require("css3transform");
var scrollHei = null;

export default {
  name: "ChargeRecord",
  data() {
    return {
      pageSize: 10,
      pageIndex: 1,
      loadMoreFlag: false,
      chargeList: []
    };
  },
  mounted() {
    var self = this,
      scroller = document.querySelector("#scroller"),
      scrollHei = document.querySelector("#scroller").clientHeight,
      hei = scrollHei > window.innerHeight ? window.innerHeight - scrollHei : 0;

    Transform(scroller, true);

    var AT = new AlloyTouch({
      touch: "#wrapper", //反馈触摸的dom
      vertical: true, //不必需，默认是true代表监听竖直方向touch
      target: document.querySelector("#scroller"), //运动的对象
      property: "translateY", //被运动的属性
      initialValue: 0,
      bindSelf: true,
      min: 0,
      max: 0,
      change: function(value) {
        //console.log(document.documentElement.clientHeight);
      },
      touchMove: function(evt, value) {
        var diff = this.min - value;
        if (diff > 50) {
          $(".scroll-loader").html("正在更新数据...");
        } else {
          $(".scroll-loader").html("上拉加载更多...");
        }
      },
      touchEnd: function(evt, value) {
        var diff = this.min - value;
        if (diff > 50) {
          console.log("距离底部还有100像素的时候就加载");

          if (self.loadMoreFlag) {
            self.loadMore(function() {
              self.$nextTick(function() {
                var scrollHei = document.querySelector("#scroller")
                  .clientHeight;
                var hei =
                  scrollHei > window.innerHeight
                    ? window.innerHeight - scrollHei - 70
                    : 0;
                AT.min = hei;
              });
            });
          }
        }
      }
    });

    // 加载更多
    self.loadMore(function() {
      self.$nextTick(function() {
        var scrollHei = document.querySelector("#scroller").clientHeight;
        var hei =
          scrollHei > window.innerHeight ? window.innerHeight - scrollHei : 0;
        AT.min = hei;
      });
    });
  },
  created() {},
  methods: {
    GoChargeDetails(id) {
      this.$router.push({
        path: "chargeDetails",
        query: { id: id }
      });
    },
    loadMore(callback) {
      var self = this;
      var req = this.Axios.get(this.Interface.host, {
        params: self.GetQuerys({
          pageIndex: self.pageIndex,
          pageSize:self.pageSize
        })
      });

      // 请求数据
      req.then(res => {
        var data = res.data.data.me;
        if (data != null) {
          var count = data.consumingRecords.count;
          var record = data.consumingRecords.rows;
          self.pageTotal = count;

          self.loadMoreFlag =
            count >= this.pageIndex * this.pageSize ? true : false;

          self.pageIndex = self.pageIndex + 1;
          console.log(self.loadMoreFlag);

          var r = self.chargeList;
          record.forEach((item, index) => {
            r.push(item);
          });

          self.chargeList = r;

          if (callback) callback();
        }
      });
      // 请求接口失败
      req.catch(res => {
        this.Toast("服务器开小差了~");
      });
    },
    GetQuerys({ pageIndex, pageSize }) {
      return {
        query: `{
                  me {
                    consumingRecords(pageIndex:${pageIndex},pageSize:${pageSize}) {
                      rows {
                          id
                          orderNumber
                          beginTime
                          created_at
                          amount
                          state
                          actualTimespan
                          plug {
                            site {
                              name
                              area
                              address
                            }
                          }
                        }
                      count
                    }
                  }
                }`
      };
    }
  }
};
</script>
